<!-- 我是卖方票据详情 -->
<template>
    <div class="content">
        <el-row class="detail_mian">
            <el-col :span="12" class="mian_block">
                <el-row class="title_block bill_info hpx-title-border">
                    <span class="title_text">票据信息</span>
                </el-row>
                <el-form label-width="120px" size="mini" class="detail_info">
                    <el-form-item label="票据号:">{{model.bill_number}}</el-form-item>
                    <el-form-item label="承兑人全称:">{{model.acceptor_name}}</el-form-item>
                    <el-form-item label="承兑机构:">{{model.acceptor_type_name}}</el-form-item>
                    <el-form-item label="票面金额:" class="hpx-red-tips"><span class="remind">{{model.bill_sum_price | numFormat}}元</span></el-form-item>
                    <el-form-item label="到期时间:">{{model.bill_deadline_time | formatDate}}(<span v-if="model.remaining_day != null">剩余{{model.remaining_day}}天</span><span v-if="model.remaining_day == null">已过期</span>)</el-form-item>
                    <el-form-item label="汇票瑕疵:" class="hpx-red-tips">{{formatArr}}</el-form-item>
                    <el-form-item label="背书次数:">{{model.endorsement_number}}</el-form-item>
                    <el-row class="imgs">
                        <el-col :span="5" :offset="1" v-if="model.bill_front_photo_id">
                            <!--<img :src="model.bill_front_photo_path" alt="">-->
                            <ImageZoom
                                    :width='165'
                                    :height='146'
                                    mode='preview'
                                    :image="model.bill_front_photo_path"
                            ></ImageZoom>
                            <el-row class="tag">票据正面</el-row>
                        </el-col>
                        <el-col :span="5" :offset="1" v-if="model.bill_back_photo_id1">
                            <!--<img :src="model.bill_back_photo_path1" alt="">-->
                            <ImageZoom
                                    :width='165'
                                    :height='146'
                                    mode='preview'
                                    :image="model.bill_back_photo_path1"
                            ></ImageZoom>
                            <el-row class="tag">背书面1</el-row>
                        </el-col>
                        <el-col :span="5" :offset="1" v-if="model.bill_back_photo_id2">
                            <!--<img :src="model.bill_back_photo_path2" alt="">-->
                            <ImageZoom
                                    :width='165'
                                    :height='146'
                                    mode='preview'
                                    :image="model.bill_back_photo_path2"
                            ></ImageZoom>
                            <el-row class="tag">背书面2</el-row>
                        </el-col>
                    </el-row>
                </el-form>
                <BillContract ref="bill-contaract-dailog"/>
            </el-col>
            <el-col :span="6" class="mian_block">
                <el-row class="title_block bill_info hpx-title-border">
                    <span class="title_text">交易信息</span>
                </el-row>
                <el-form label-width="120px" size="mini" class="detail_info">
                    <el-form-item label="期望利率:" class="hpx-red-tips">
                        {{model.bill_product_rate && model.bill_product_rate != 0 ? model.bill_product_rate + '%' : '--'}}
                    </el-form-item>
                    <el-form-item label="每十万加:" class="hpx-red-tips">
                        {{model.bill_product_every_plus && model.bill_product_every_plus != 0 ? model.bill_product_every_plus + '元' : '--'}}
                    </el-form-item>
                    <el-form-item label="竞价方式:">{{model.bidding_mode == 3210 ? '一口价' : '自由竞价'}}</el-form-item>
                    <el-form-item label="发布期限:">T+{{model.trade_appoint_day}}</el-form-item>
                    <el-form-item label="期望贴现额:" class="hpx-red-tips"><span class="remind">{{model.hope_deal_price | numFormat}}元</span></el-form-item>
                </el-form>
            </el-col>
            <el-col :span="6" class="mian_block">
                <el-row class="title_block bill_info hpx-title-border">
                    <span class="title_text">票据状态</span>
                </el-row>
                <div class="order_status">
                    <el-row class="text_center" v-if="model.bill_status_code == 800">
                        <el-row>{{model.is_checked == 0 ? '待审核' : (model.is_checked == -1 ? '审核失败' : '未发布')}}</el-row>
                        <el-row>
                            <el-button type="primary" size="small" plain class="bill-btn" @click="$router.push(`/seller/editBill/1/${model.bill_id}`)" v-if="model.is_checked == -1 && model.bill_product_id">重新发布</el-button>
                            <el-button type="primary" size="small" plain class="bill-btn" @click="$router.push(`/seller/editBill/2/${model.bill_id}`)" v-if="model.is_checked == -1 && !model.bill_product_id">重新录入</el-button>
                        </el-row>
                    </el-row>
                    <el-row class="text_center" v-if="model.bill_status_code >= 801 && model.bill_status_code < 804">
                        <div v-if="model.bidding_mode == 3212 || (model.bidding_mode == 3210 && biddingsLen == 0)">待买方竞价</div>
                        <div v-if="model.bidding_mode == 3210 && biddingsLen > 0">待确认交易</div>
                    </el-row>
                    <el-row class="text_center" v-if="model.bill_status_code >= 804 && model.bill_status_code < 810">交易中...</el-row>
                    <el-row class="text_center" v-if="model.bill_status_code >= 810 && model.bill_status_code < 814">交易完成</el-row>
                    <el-row class="text_center" v-if="model.bill_status_code == 814">申请退款中...</el-row>
                    <el-row class="text_center" v-if="model.bill_status_code == 815 || model.bill_status_code == 816">
                        <el-row>交易中止</el-row>
                        <el-row>
                            <el-button type="primary" size="small" plain @click="$router.push(`/seller/editBill/1/${model.bill_id}`)" >重新发布</el-button>
                        </el-row>
                    </el-row>
                </div>
            </el-col>
        </el-row>
        <el-row class="offer_info">
            报价信息: 已有<span class="hpx-red-tips">{{biddingsLen}}</span>家机构报价
        </el-row>
        <template>
            <!-- <Table :tableData="tableData" :operation="true" :pagination="false">
                <template slot-scope="{scope}">
                    <el-button type="primary"
                        v-if="scope.row.bidding_bid_result == 0"
                        @click="showFinishBidding(scope.row)">
                    选择成交</el-button>
                </template>
            </Table> -->
            <el-table
                :data="tableData.body"
                style="width: 100%">
                <el-table-column
                    prop="bidding_enterprise_name"
                    label="报价机构">
                    <template slot-scope="scope">
                        <div>{{ model.bill_status_code >= 806 ? scope.row.bidding_enterprise_name : hideenterpriseName(scope.row.bidding_enterprise_name) }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="bidding_bid_rate"
                    label="利率">
                    <template slot-scope="scope">
                        <div class="hpx-red-tips">{{scope.row.bidding_bid_rate}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="bidding_bid_every_plus"
                    label="每十万加(元)">
                    <template slot-scope="scope">
                        <div class="hpx-red-tips">{{scope.row.bidding_bid_every_plus ? scope.row.bidding_bid_every_plus : '--'}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="bidding_bid_deal_price"
                    label="贴现额(元)">
                    <template slot-scope="scope">
                        <div class="hpx-red-tips">{{scope.row.bidding_bid_deal_price}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="bidding_every_plus_interest"
                    label="约合每十万扣款(元)">
                    <template slot-scope="scope">
                        <div class="hpx-red-tips">{{scope.row.bidding_every_plus_interest}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="bidding_bid_time"
                    label="报价时间"
                    :formatter="formatTime">
                </el-table-column>
                <el-table-column
                    prop="bidding_bid_status"
                    label="状态">
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary"
                            v-if="scope.row.bidding_bid_result == 0"
                            @click="showFinishBidding(scope.row)">
                        选择成交</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <!-- 选择成交弹窗 -->
        <DialogInput ref="bargain" title="卖方确认交易操作" class="drawer_dialog">
            <div class="rem-dialog-con text_left">
                <FormTitle title="买方信息"/>
                <el-form label-width="140px" size="mini">
                    <el-form-item label="企业名称：">{{model.bill_status_code >= 806 ? this.bargainModel.bidding_enterprise_name : this.bargainModel.bidding_enterprise_name | hideStr}}</el-form-item>
                </el-form>
                <FormTitle title="交易信息"/>
                <el-form label-width="140px" size="mini">
                    <el-form-item label="贴现利率(%)：">{{bidRate ? bidRate : '--'}}</el-form-item>
                    <el-form-item label="每十万加(元)：">{{this.bargainModel.bidding_bid_every_plus ? this.bargainModel.bidding_bid_every_plus : '--'}}</el-form-item>
                    <el-form-item label="约合每十万扣(元)：">
                        {{this.bargainModel.bidding_every_plus_interest}}
                    </el-form-item>
                    <el-form-item label="贴现金额(元)：">{{this.bargainModel.bidding_bid_deal_price}}</el-form-item>
                </el-form>
                <FormTitle title="卖方提现账户"/>
                <el-form label-width="140px" size="mini">
                    <el-form-item label="企业名称：">{{model.drawer_name}}</el-form-item>
                    <el-form-item label="账号：">{{accountModel.account_number}}</el-form-item>
                    <el-form-item label="开户行：">{{accountModel.bank_name}}</el-form-item>
                    <el-form-item label="联行号：">{{accountModel.bank_number}}</el-form-item>
                </el-form>
            </div>
            <span slot="Remfooter">
                <el-row class="sign_con_btn">
                    <el-checkbox v-model="signCheck">我已阅读并同意<el-button type="text" @click="openBillContract()">《票据应收款转让服务合同》</el-button></el-checkbox>
                </el-row>
                <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">再考虑一下</el-button>
                <el-button type="primary" class="dialog-button" :disabled="!signCheck" @click="confirmDeal()">确认交易</el-button>
            </span>
        </DialogInput>
    </div>
</template>

<script lang="ts">
    import {Vue, Component, Prop, Watch} from 'vue-property-decorator'
    import Table from '@component/common/HpxTable.vue'
    import DialogInput from '@component/common/DialogInput.vue'
    import FormTitle from '@component/common/FormTitle.vue';
    import BillContract from '@component/common/BillContract.vue';
    import ImageZoom from '@component/common/ImageZoom.vue';
    import moment from 'moment'
    import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
    @Component({
        components:{
            Table,
            DialogInput,
            FormTitle,
            BillContract,
            ImageZoom
        },
        computed:{
            ...mapState([
                'userInfo'
            ]),
            ...mapState('myBill', ['billContractCona'])
        },
        methods: {
            ...mapMutations('myBill', [
                'setBillContractCona'
            ]),
            ...mapActions([
                'getAllTips'
            ])
        }
    })
    export default class MyBiddingDetail extends Vue {
        @Prop(String) id!:string

        model:any = {}
        bargainModel: any = {}
        endorsement:any = {}
        biddingsLen:number = 0
        accountModel: any = {}
        receiverAccount: any = {}
        signCheck: Boolean = true;
        tableData = {
            header:[
                {
                    label: '报价机构',
                    key: 'bidding_enterprise_name',
                    formatter: (row:any) => this.hideenterpriseName(row.bidding_enterprise_name)
                },
                {
                    label: '利率',
                    key: 'bidding_bid_rate'
                },
                {
                    label: '每十万加(元)',
                    key: 'bidding_bid_every_plus',
                    formatter: (row:any) => row.bidding_bid_every_plus ? row.bidding_bid_every_plus : '--'
                },
                {
                    label: '贴现额(元)',
                    key: 'bidding_bid_deal_price'
                },
                {
                    label: '约合每十万扣款(元)',
                    key: 'bidding_every_plus_interest'
                },
                {
                    label: '报价时间',
                    key: 'bidding_bid_time',
                    formatter: row => moment(row.bidding_bid_time).format('YYYY-MM-DD HH:mm:ss')
                },
                {
                    label: '状态',
                    key: 'bidding_bid_status'
                }
            ],
            body: [],
            footer: {
                total: 100,
                pageSize: 10,
                currentPage: 1,
            }
        }
        @Watch('id')
        onIdChanged(val: string, oldVal: string) {
            this.getDetailData()
        }
        //获取详细数据
        async getDetailData () {
            let res = await this.$http.get(`bills/bill/${this.id}`)
            if(res.status < 204){
                this.model = res.data;
                this.accountModel = res.data.account_information;
                let data = res.data;
                let billContractCona = {
                    drawer_name: data.drawer_name,
                    bill_number: data.bill_number,
                    acceptor_name: data.acceptor_name,
                    bill_sum_price: data.bill_sum_price,
                    bill_deadline_time: data.bill_deadline_time,
                    receiver_name: '',
                    receiver_legalname: '',
                    drawer_account_number: res.data.account_information.account_number,
                    drawer_account_person: res.data.account_information.account_person,
                    drawer_bank_name: res.data.account_information.bank_name,
                    drawer_bank_number: res.data.account_information.bank_number,
                    receiver_account_number: '',
                    receiver_account_person: '',
                    receiver_bank_name: '',
                    receiver_bank_number: '',
                    deal_price: '',
                    total_deal_price: '',
                    server_price: '',
                    systemTime: ''
                }
                this.setBillContractCona(billContractCona);
                if (res.data.bill_biddings && res.data.bill_biddings != undefined){
                    this.tableData.body= res.data.bill_biddings;
                    this.biddingsLen = res.data.bill_biddings.length;
                    //如果是一口价并且有人竞价，直接弹框提示确认交易   bidding_bid_result：0 => 竞价中
                    if(res.data.bidding_mode == 3210){
                        if(this.biddingsLen != 0 && res.data.bill_biddings[0].bidding_bid_result == 0){
                            this.showFinishBidding(res.data.bill_biddings[0])
                        }
                    }
                }
            }
        }
        hideenterpriseName (value:string) {
            if (!value) return ''
            let enterPriseNameArr = value.split('');
            enterPriseNameArr = enterPriseNameArr.slice(0, 2).concat(enterPriseNameArr.slice(-2,enterPriseNameArr.length));
            enterPriseNameArr.splice(2, 0, '*', '*','*');
            return enterPriseNameArr.join('');
        }
        formatTime (row) {
            return moment(row.bidding_bid_time).format('YYYY-MM-DD HH:mm:ss')
        }
        // 根据竞价id查询双方银行卡信息
        async getAccountInfo (bidId: string | number) {
            let res = await this.$http.get(`paying/xingyeapi/account/getAccByBidding/${bidId}`)
            if(res.status == 200){
                if(res.data.receiverAccount){
                    this.receiverAccount = res.data.receiverAccount;
                    this.billContractCona.receiver_account_number = res.data.receiverAccount.account_number;
                    this.billContractCona.receiver_account_person = res.data.receiverAccount.account_person;
                    this.billContractCona.receiver_bank_name = res.data.receiverAccount.bank_name;
                    this.billContractCona.receiver_bank_number = res.data.receiverAccount.bank_number;
                }else{
                    this.$alert('未查询到买方账户信息','提示',{
                        confirmButtonText: '确定',
                        customClass: 'custom-message-box'
                    })
                }
            }
        }
        // 根据企业id查询法人代表
        async getLegalInfo (enterprise_id: string|number, check: string|number) {
            let res = await this.$http.get(`enterpriseXingyeUser/getLegalInfo?enterpriseId=${enterprise_id}`)
            if(res.status == 200){
                if(check == 1){
                    // 卖方法人
                    this.billContractCona.drawer_legalname = res.data.legalName;
                }else if(check == 2){
                    // 买方法人
                    this.billContractCona.receiver_legalname = res.data.legalName;
                }
            }
        }
        async getComission () {
            let res = await this.$http.get(`tools/calculator/comission?acceptorTypeId=${this.model.acceptor_type_id}&sumPrice=${this.model.bill_sum_price}`)
            if(res.status == 200){
                this.billContractCona.server_price = res.data;
            }
        }
        async getSystemTime () {
            let res = await this.$http.get('tools/systemTime')
            if(res.status == 200){
                this.billContractCona.systemTime = res.data;
            }
        }
        get formatArr () {
            return this.model.bill_flaw_names ? this.model.bill_flaw_names.join('，') : ''
        }
        get bidRate () {
            return this.bargainModel.bidding_bid_rate == '' || this.bargainModel.bidding_bid_rate == null ? '--' : this.bargainModel.bidding_bid_rate;
        }

        // 选择成交
        showFinishBidding (row) {
            this.bargainModel = row;
            this.$refs['bargain'].openDialog();
            this.billContractCona.receiver_name = row.bidding_enterprise_name;
            this.billContractCona.deal_price = row.bidding_bid_deal_price;
            this.billContractCona.total_deal_price = row.bidding_bid_deal_price;
            this.getAccountInfo(row.bidding_id);
            // 查询卖方法人代表
            this.getLegalInfo(this.userInfo.enterprise_id, 1);
            this.getLegalInfo(this.bargainModel.bidding_bid_enterprise_id, 2);
            this.getComission();
            this.getSystemTime();
        }
        // 弹出票据转让服务协议
        openBillContract () {
            this.$refs['bill-contaract-dailog'].openDialog();
        }
        // 确认交易
        async confirmDeal () {
            let sendFoem = {
                bill_product_bidding_id: this.bargainModel.bidding_id,
                is_NeedXY: 1,
                type: 'bidding',
                drawer_account_id: this.accountModel.account_id,
                receiver_account_id: this.receiverAccount.account_id,
                from_enterprise_id: this.model.drawer_id,
                order_every_plus_deduct: this.bargainModel.bidding_every_plus_interest, //约合每十万扣款
                bidding_bid_rate: this.bargainModel.bidding_bid_rate,  //利率
                bidding_bid_every_plus: this.bargainModel.bidding_bid_every_plus, //每十万加
                // bid_rate_price: this.bargainModel.bidding_every_plus_interest, //贴息
                bid_deal_price: this.bargainModel.bidding_bid_deal_price //贴现金额
            }
            let res = await this.$http.post('bills/order',sendFoem)
            if(res.status == 201){
                this.$refs['bargain'].closeDialog();
                this.getAllTips()
                this.$alert('确认交易方成功!','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {
                        this.$router.push('/seller/order');
                    }
                })
            }
            //确认时，买方又更改了竞价
            if(res.status == 290){
                this.$alert(res.msg,'提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {
                        this.$refs['bargain'].closeDialog();
                        this.getDetailData()
                    }
                })
            }
            // else{
            //     this.$alert(res.msg,'提示',{
            //         confirmButtonText: '确定',
            //         customClass: 'custom-message-box',
            //         // callback: action => {
            //         //     this.$router.push('/seller/order');
            //         // }
            //     })
            // }
        }
        closeDialog () {
            this.$refs['bargain'].closeDialog()
        }
        mounted() {
            this.getDetailData();
        }
    }
</script>

<style lang="scss" scoped>
    .enterprise_info{
        height: 50px;
        line-height: 50px;
        .col{
            margin-left: 50px;
        }
        .top_btn{
            float: right;
            margin-right: 40px;
        }
    }
    .bill_info{
        height: 30px;
        line-height: 30px;
    }
    .detail_mian{
        .mian_block{
            height: 594px;
        }
    }
    .order_status{
        margin-top: 100px;
    }
    .el-form-item__label{
        color: $__color-label !important;
    }
    .el-form-item--mini .el-form-item__content, .el-form-item--mini .el-form-item__label {
        line-height: 20px !important;
    }
    .offer_info{
        margin-top: 20px;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid $__color-primary;
        color: $__color-label;
        font-size: 18px;
    }
    .buy_btn{
        text-align: right;
    }
    .rem-dialog-con{
        text-align: left;
    }
    .company{
        text-align: center;
    }
    .remind{
        font-size: 20px;
    }
</style>
<style lang="scss">
    .sign_con_btn {
        .el-checkbox__input.is-checked .el-checkbox__inner {
            background-color: $__color-link !important;
            border-color: $__color-link !important;
        }
        .el-checkbox__input.is-checked + .el-checkbox__label {
            color: $__color-show !important;
        }
        .el-button--text {
            color: $__color-link !important;
        }
    }
    .drawer_dialog {
        .el-dialog__body {
            padding: 0 20px;
            .el-form-item--mini.el-form-item {
                margin-bottom: 2px;
            }
        }
        .dialog-footer {
            border-top: 1px solid $__color-line;
        }
    }
</style>